<!-- 资讯管理 -->
<template>
    <div class="app-container">
        <div class="container">
            <el-row>
                <div class="checkbox-group" style="margin-bottom: 40px;">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox v-for="item in columns" :key="item.value" :label="item.value">{{  item.text }}</el-checkbox>
                    </el-checkbox-group>
                    <el-button class="margin20" type="primary" @click="handleSaveTime">提交</el-button>
                </div>
                <!-- <el-form :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.username" placeholder="用户名" clearable :readonly="!isAdd" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.password" :placeholder="isAdd ? '密码' : '留空将不会修改密码'" :show-password="true"
                            clearable />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="form.status" placeholder="状态" clearable>
                            <el-option v-for="item in Object.keys(statusDesc)" :label="statusDesc[item]" :key="item"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="权限">
                        <el-select v-model="form.role" placeholder="权限" clearable>
                            <el-option v-for="item in Object.keys(roleDesc)" :label="roleDesc[item]" :key="item"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form> -->
            </el-row>
        </div>
    </div>
</template>
  
<script>
import { Plus } from '@element-plus/icons-vue'

import { createOrUpdateInfo, getStatus, getAdminById, getRole } from '@/api/admin'
import { utilsMixin } from '@/mixin/utils'

import { getUploadImg } from '@/api/dashboard'


export default {
    name: 'AdminUserCreate',
    mixins: [utilsMixin],
    components: { Plus },
    data() {
        return {
            columns: [
                { text: '5分钟推送', value: '1', select: false },
                { text: '15分钟', value: '2', select: false },
                { text: '30分钟', value: '3', select: false },
                { text: '1小时', value: '4', select: false },
                { text: '2小时', value: '7', select: false },
                { text: '4小时', value: '5', select: false },
                { text: '6小时', value: '8', select: false },
                { text: '12小时', value: '9', select: false },
                { text: '日线', value: '6', select: false },
            ],
            form: {
                id: '',
                username: '',
                password: '',
                status: '',
                role: ''
            },
            isAdd: false,
            uploadUrl: getUploadImg(),
            statusDesc: getStatus(),
            roleDesc: getRole()
        }
    },
    created() {
        if (this.$route.params && this.$route.params.id) {
            if (this.$route.params.id !== 'create') {
                this.form.id = this.$route.params.id
                this.fetchData()
            } else {
                this.isAdd = true
            }
        }
    },
    methods: {
        handleSaveTime() {

        },
        fetchData() {
            getAdminById(this.form.id).then(response => {
                this.form = Object.assign(this.form, response.data, { status: response.data.status.toString(), password: '' })
            }).catch(() => {

            })
        },
        onCreate() {
            this.clearForm()
            this.addFormVisible = true
            this.isAdd = true
        },
        onSubmit() {
            createOrUpdateInfo(this.form).then(respones => {
                this.form.id = respones.data
                this.$message({ message: '保存成功', type: 'success' })
            }).catch(() => {

            })
        }
    }
}
</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
  
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
.margin20 {
    margin: 20px 0;
}
</style>